<script setup>
import { ref } from 'vue'

const visualForm = ref({
  title: '',
  musicFile: null,
  visualStyle: 'wave',
  colorScheme: 'default',
  sensitivity: 50,
  smoothing: 50,
  effects: []
})

const visualStyles = [
  { id: 'wave', name: '波形', icon: '〰️' },
  { id: 'particles', name: '粒子', icon: '✨' },
  { id: 'spectrum', name: '频谱', icon: '📊' },
  { id: 'geometric', name: '几何', icon: '🔷' }
]

const colorSchemes = [
  { id: 'default', name: '默认配色', colors: ['#6366f1', '#818cf8', '#4f46e5'] },
  { id: 'sunset', name: '日落', colors: ['#f59e0b', '#ef4444', '#ec4899'] },
  { id: 'ocean', name: '海洋', colors: ['#0ea5e9', '#06b6d4', '#3b82f6'] },
  { id: 'forest', name: '森林', colors: ['#22c55e', '#10b981', '#059669'] }
]

const effects = [
  { id: 'blur', name: '模糊', icon: '🌫️' },
  { id: 'glow', name: '发光', icon: '💫' },
  { id: 'mirror', name: '镜像', icon: '🪞' },
  { id: 'trail', name: '轨迹', icon: '🌠' }
]

const isPlaying = ref(false)
const togglePlay = () => {
  isPlaying.value = !isPlaying.value
}
</script>

<template>
  <div class="create-visual">
    <div class="editor-container">
      <!-- 预览区域 -->
      <div class="preview-section">
        <div class="preview-canvas">
          <div class="placeholder-visual" :class="{ playing: isPlaying }">
            <div class="wave-bar"></div>
            <div class="wave-bar"></div>
            <div class="wave-bar"></div>
            <div class="wave-bar"></div>
            <div class="wave-bar"></div>
          </div>
        </div>
        <div class="preview-controls">
          <button class="control-btn" @click="togglePlay">
            {{ isPlaying ? '⏸️' : '▶️' }}
          </button>
          <div class="time-slider">
            <input type="range" min="0" max="100" value="0">
            <span>0:00 / 3:45</span>
          </div>
          <button class="control-btn">🔊</button>
        </div>
      </div>

      <!-- 编辑区域 -->
      <div class="editor-section">
        <h2>创建可视化效果</h2>
        
        <div class="form-group">
          <label>作品标题</label>
          <input 
            v-model="visualForm.title"
            type="text"
            placeholder="给你的作品起个名字"
          >
        </div>

        <div class="form-group">
          <label>上传音乐</label>
          <div class="upload-area">
            <span class="upload-icon">🎵</span>
            <p>点击或拖拽上传音乐文件</p>
            <span class="upload-tip">支持 MP3, WAV 格式</span>
          </div>
        </div>

        <div class="form-group">
          <label>可视化样式</label>
          <div class="style-options">
            <button 
              v-for="style in visualStyles"
              :key="style.id"
              :class="['style-btn', visualForm.visualStyle === style.id ? 'active' : '']"
              @click="visualForm.visualStyle = style.id"
            >
              <span class="style-icon">{{ style.icon }}</span>
              {{ style.name }}
            </button>
          </div>
        </div>

        <div class="form-group">
          <label>配色方案</label>
          <div class="color-schemes">
            <button 
              v-for="scheme in colorSchemes"
              :key="scheme.id"
              :class="['scheme-btn', visualForm.colorScheme === scheme.id ? 'active' : '']"
              @click="visualForm.colorScheme = scheme.id"
            >
              <div class="color-preview">
                <div 
                  v-for="(color, index) in scheme.colors"
                  :key="index"
                  class="color-dot"
                  :style="{ backgroundColor: color }"
                ></div>
              </div>
              <span>{{ scheme.name }}</span>
            </button>
          </div>
        </div>

        <div class="form-group">
          <label>效果调节</label>
          <div class="effect-controls">
            <div class="slider-control">
              <span>灵敏度</span>
              <input 
                v-model="visualForm.sensitivity"
                type="range" 
                min="0" 
                max="100"
              >
              <span>{{ visualForm.sensitivity }}%</span>
            </div>
            <div class="slider-control">
              <span>平滑度</span>
              <input 
                v-model="visualForm.smoothing"
                type="range" 
                min="0" 
                max="100"
              >
              <span>{{ visualForm.smoothing }}%</span>
            </div>
          </div>
        </div>

        <div class="form-group">
          <label>特效</label>
          <div class="effects-grid">
            <button 
              v-for="effect in effects"
              :key="effect.id"
              :class="['effect-btn', visualForm.effects.includes(effect.id) ? 'active' : '']"
              @click="visualForm.effects.includes(effect.id) 
                ? visualForm.effects = visualForm.effects.filter(e => e !== effect.id)
                : visualForm.effects.push(effect.id)"
            >
              <span class="effect-icon">{{ effect.icon }}</span>
              {{ effect.name }}
            </button>
          </div>
        </div>

        <button class="submit-btn">
          <span>✨</span>
          生成可视化效果
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.create-visual {
  padding: 1rem;
}

.editor-container {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 2rem;
  min-height: 80vh;
}

.preview-section {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
}

.preview-canvas {
  flex: 1;
  background: #f0f1fe;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.placeholder-visual {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.wave-bar {
  width: 4px;
  height: 40px;
  background: var(--primary-color);
  border-radius: 2px;
}

.playing .wave-bar {
  animation: wave 1s infinite ease-in-out;
}

.wave-bar:nth-child(2) { animation-delay: 0.1s; }
.wave-bar:nth-child(3) { animation-delay: 0.2s; }
.wave-bar:nth-child(4) { animation-delay: 0.3s; }
.wave-bar:nth-child(5) { animation-delay: 0.4s; }

@keyframes wave {
  0%, 100% { height: 40px; }
  50% { height: 80px; }
}

.preview-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

.time-slider {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.time-slider input {
  width: 100%;
}

.time-slider span {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.editor-section {
  background: white;
  border-radius: 16px;
  padding: 2rem;
}

.form-group {
  margin-bottom: 2rem;
}

.form-group label {
  display: block;
  margin-bottom: 1rem;
  color: var(--text-primary);
  font-weight: 500;
}

input[type="text"] {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
}

.upload-area {
  border: 2px dashed var(--primary-color);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
}

.upload-area:hover {
  background: #f0f1fe;
}

.upload-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  display: block;
}

.upload-tip {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 0.5rem;
  display: block;
}

.style-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.style-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.3s;
}

.style-btn.active {
  border-color: var(--primary-color);
  background: #f0f1fe;
  color: var(--primary-color);
}

.color-schemes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.scheme-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.3s;
}

.scheme-btn.active {
  border-color: var(--primary-color);
  background: #f0f1fe;
}

.color-preview {
  display: flex;
  gap: 0.3rem;
}

.color-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.effect-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.slider-control {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.slider-control input {
  flex: 1;
}

.effects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.effect-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition: all 0.3s;
}

.effect-btn.active {
  border-color: var(--primary-color);
  background: #f0f1fe;
  color: var(--primary-color);
}

.submit-btn {
  width: 100%;
  padding: 1rem;
  border: none;
  border-radius: 8px;
  background: var(--primary-color);
  color: white;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.submit-btn:hover {
  background: var(--accent-color);
}
</style> 